<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas">
    </canvas>

    <script>
        var canvas = document.querySelector("#canvas");
        var WIDTH = 800,
            HEIGHT = 800;

        canvas.width = WIDTH;
        canvas.height = HEIGHT;
        var ctx = canvas.getContext('2d');
        
        //获取一个图像对象
        //new Image()创建了一个新的图像对象
        var img = new Image();
        img.src = "./image/gold.png"
        
        var img1 = new Image();
        img1.src = "./image/favicon.ico"

        var img2 = new Image();
        img2.src = "./image/angel.png"

        //使用定时器，让图片延时出现
        setTimeout(function () {       
            //三参数的表现形式（图片，横坐标，纵坐标）
            ctx.drawImage(img1, 100, 50, 50, 50);
            //五参数的表现形式（图片，横坐标，纵坐标，宽，高）
            ctx.drawImage(img2,0,0,65,95,300,600,65,95);
            ctx.drawImage(img2,0,95,65,95,400,600,65,95);
            //九参数的表现形式（图片，开始裁剪的x坐标位置，开始裁剪的y坐标位置，被剪裁的宽，被剪裁的高，横坐标，纵坐标，宽，高）
            //2-5这四个参数 来指定从原图截取的部分
        }, 300)
        //setTime（函数，300） 300毫秒之后再执行图像的代码
    </script>
</body>


</html>